<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" class="email" />
    <span></span>
    <input type="text" class="qq"><span class="exchange">qq号</span>
    <script>


        
		// var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,3})(\.[a-zA-Z]{2,3})?$/;
        var emailEle = document.querySelector(".email");
        var spanEle = document.querySelector("span");
        var qqEle = document.querySelector(".qq");
        emailEle.onblur = function(){
            // console.log(111);
            var emailValue = emailEle.value;
            if(reg.test(emailValue)){
                // console.log("符合邮箱规则");
                spanEle.innerText = "符合邮箱规则"
            }else{
                console.log("不符合邮箱规则");
                spanEle.innerText = "不符合邮箱规则"
            }
        }

            // emailEle.oninput = function(){
            //     console.log("输入了");
            // }

            // 验证 qq  ：qq必须是数字 是5到12位的数字； 第一位不能是0开头

            qqEle.onblur = function(){
                var value = this.value;
                var reg = /^[1-9]\d{4,11}$/;
                if(reg.test(value)){
                    document.querySelector(".exchange").innerHTML = "符合要求"
                }else{
                    document.querySelector(".exchange").innerHTML = "不符合要求"
                }
            }
    </script>
</body>
</html>